<template>
  <div>
    <div style="padding: 20px;height: 500px;border-radius: 10px" :style="{backgroundColor:isDarkTheme?'#18181c':'#fff'}">
      <div style="width: 100%;height: 100%" id="main"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  DatasetComponentOption,
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  TransformComponent
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted, computed } from "vue";

import useThemeStore from "../../../store/themeStore";
const themeStore = useThemeStore();
const isDarkTheme = computed(() => themeStore.isDarkThemeGetter); // 是否为深色主题

echarts.use([
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  LineChart,
  CanvasRenderer,
  LabelLayout,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<| DatasetComponentOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | LineSeriesOption>;

function getLineChartData(myChart: any) {
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET", 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/life-expectancy-table.json', true);
  xmlHttp.send();
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4) {
      if (xmlHttp.status == 200) {
        run(JSON.parse(xmlHttp.response), myChart);
      } else {
        alert("Problem retrieving XML data");
      }
    }
  };
}


onMounted(() => {
  let chartDom = document.getElementById('main')!;
  let myChart = echarts.init(chartDom);
  getLineChartData(myChart);
  window.addEventListener('resize', () => {
    console.log()
    myChart.resize()
  })
})


function run(_rawData: any, myChart: any) {
  let option: EChartsOption | null = null;
  // let countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
  const countries = [
    'Finland',
    'France',
    'Germany',
    'Iceland',
    'Norway',
    'Poland',
    'Russia',
    'United Kingdom'
  ];
  const datasetWithFilters: any[] = [];
  const seriesList: any[] = [];
  echarts.util.each(countries, function (country) {
    let datasetId = 'dataset_' + country;
    datasetWithFilters.push({
      id: datasetId,
      fromDatasetId: 'dataset_raw',
      transform: {
        type: 'filter',
        config: {
          and: [
            { dimension: 'Year', gte: 1950 },
            { dimension: 'Country', '=': country }
          ]
        }
      }
    });
    seriesList.push({
      type: 'line',
      datasetId: datasetId,
      showSymbol: false,
      name: country,
      endLabel: {
        show: true,
        formatter: function (params: any) {
          return params.value[3] + ': ' + params.value[0];
        }
      },
      labelLayout: {
        moveOverlap: 'shiftY'
      },
      emphasis: {
        focus: 'series'
      },
      encode: {
        x: 'Year',
        y: 'Income',
        label: ['Country', 'Income'],
        itemName: 'Year',
        tooltip: ['Income']
      }
    });
  });

  option = {
    animationDuration: 2000,
    dataset: [
      {
        id: 'dataset_raw',
        source: _rawData
      },
      ...datasetWithFilters
    ],
    title: {
      text: 'echarts5 示例'
    },
    tooltip: {
      order: 'valueDesc',
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      nameLocation: 'middle'
    },
    yAxis: {
      name: 'Income'
    },
    grid: {
      right: 140
    },
    series: seriesList
  };

  myChart.setOption(option);

  option && myChart.setOption(option);
}


</script>

<style scoped>

</style>
